<template>
    <div class="view-body">
        <navbar :title="$t('new_open_course')"></navbar>
        <div class="content-noBottom">
          <!--选择课程-->
        <div class="header-select">
            <ul class="header-select-list clearfix">
                <li v-bind:class="{'cur':isShow1 || (selectType && selectType !== 'All')}" @click="selectedClick1(1)">{{ $t("cos_type") }}</li>
            </ul>
            <!--课程类型-->
            <div class="headerSelect-alert1" v-if="isShow1">
                <ul>
                    <li v-for="item in getItemTypes" :class="{'cur': selectType == item.value}" @click="selectedType(item.value)" :key="item.type">
                        {{item.type}}
                    </li>
                </ul>
                <div @click="hideViewBox(1)"></div>
            </div>
        </div>
        <!--我的课程-->
        <div style="height: calc(100% - 56px);" class="body-content" :class="{'height-100' : total === 0}">
            <van-pull-refresh v-model="isRefresh" @refresh="onPulldownTop" loading-text="loading" pulling-text="" loosing-text="" style="height: 100%;">
                <van-list
                v-model="isLoading"
                :finished="finished"
                :finished-text="(finished&&total>0) ? $t('no_more') : ''"
                loding-text="loading"
                @load="getFreshCourseList"
                >
                    <div v-bind:class="{'height100' : total === 0}">
                        <div v-for="item in freshCourseList" :key="item.itmId" class="view-body-list" @click="detailJump(item.itmId,0, item.itmType, item.itmTitle)">
                            <div class="viewBody-listContent">
                                <div class="listContent-img" v-if="item.itmIcon">
                                    <img v-bind:src="appUrl + item.itmIcon" alt=""/>
                                </div>
                                <div class="listContent-content">
                                    <div class="listContent-title"><i class="public-mobile-icon"></i>{{ item.itmTitle }}</div>
                                    <div class="listContent-scheduleContent" v-if="item.progress">  <!--完成进度 返回数据为百分比-->
                                        <div class="listContent-scheduleContent-status">
                                            <div class="cur" :style="{'width' : item.progress + '%' }" v-if="item.progress !== 0"></div>
                                        </div>
                                        <div>
                                            <span></span>
                                            <span>{{item.progress}}</span>
                                        </div>
                                    </div>
        <!--                               <div class="color999" style="margin-bottom: 5px;" v-if="item.item.itm_retake_ind && item.item.itm_retake_ind === 1 && item.app_status === 'I' && item.stress">-->
        <!--                                   {{ $t("cos_reread") }}-->
        <!--                               </div>&lt;!&ndash;重读&ndash;&gt;-->
                                    <div class="listContent-scheduleContent-buttom clearfix" style="margin-top:20px">
                                        <div>
                                            {{ courseType[item.itmType] }}
                                        </div>
                                        <div>  <!--人数-->
                                            <span class="people-num-icon"></span>{{item.totalLearner}}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--暂无数据-->
                        <div v-if="!isLoading && total === 0" style="height:100%;">
                            <div class="box-table" style="width:100%;height:100%;">
                                <div class="box-table-cell" style="text-align: center;">
                                    <div class="no-data">
                                        <img src="../../../static/images/no-data.png" alt=""/>
                                        <p class="color999">{{ $t("no_data") }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <common-loading :isLoading="isLoading"></common-loading>
                    </div>
                </van-list>
            </van-pull-refresh>
        </div>
        </div>
    </div>
</template>

<script>
import mixin from '@/components/mixin/Mixin';
import CommonLoading from '@/components/common/loading';
export default {
    name: 'myCourses',
    data() {
        return {
            isShow1: false,
            // coursesList: [], //数据里被
            freshCourseList: [], //我的报名课程返回数据
            pageNo: 1, //分页页码
            maxPageNo: 0, // 最大页数 优化之前无限下拉加载发送请求问题
            total: 0, //总数
            selectType: '', //分页类型
            typeTitle: {
                I: this.$t('cos_app_inprogress'), //进行中
                C: this.$t('cos_app_completed'), //已完成
                notIAndC: this.$t('cos_other'), //其他
                F: this.$t('cos_app_fail'), //未完成
                Pending: this.$t('cos_app_pending'), //审批中
                Waiting: this.$t('cos_in_wait_list'), //等待队列
                W: this.$t('cos_app_withdrawn'), //已放弃
                Rejected: this.$t('cos_app_rejected') //已拒绝
            },
            getItemTypes: [
                {value: 'All', type: this.$t('type_all_title')}, //全部
                {value: 'SELFSTUDY', type: this.$t('cos_type_selfstudy')}, //网上课程
                {value: 'CLASSROOM', type: this.$t('cos_type_classroom')}, //面授课程
                {value: 'INTEGRATED', type: this.$t('cos_type_integrated')} //项目于式培训
            ],
            selectStatus: null,
            searchShow: false,
            isLoading: true,
            finished: false,
            isRefresh: false
        };
    },
    mixins: [mixin],
    components: {
        CommonLoading
    },
    methods: {
        init() {
            this.isShow1 = false;
            this.selectStatus = this.$route.query.selectStatus;
            //  this.getCoursesList('refresh');
            this.getFreshCourseList('refresh');
        },
        /*下拉刷新*/
        onPulldownTop() {
            this.isRefresh = true;
            setTimeout(() => {
                this.finished = false;
                this.pageNo = 1;
                //      this.getCoursesList('refresh');
                this.getFreshCourseList('refresh');
                this.isRefresh = false;
            }, 900);
        },
        hideViewBox(num) {
            this['isShow' + num] = false;
        },
        selectedClick1() {
            this.isShow1 = !this.isShow1;
        },
        /*@不虎 请求新的课程列表*/
        getFreshCourseList(option) {
            this.$axios({
                method: 'GET',
                url: `/app/api/trainee/course/notify/list`,
                params: {
                    pageNo: this.pageNo,
                    pageSize: 5,
                    notify: 'all',
                    type: this.selectType === 'All' || this.selectType === '' ? null : this.selectType
                }
            }).then(res => {
                if (res && res.status === 200) {
                    if (option && option === 'refresh') {
                        this.freshCourseList = res.data.results;
                    } else {
                        this.freshCourseList = this.freshCourseList.concat(res.data.results);
                    }
                }
                this.maxPageNo = res.data.totalPage;
                this.total = res.data.totalRecord;
                this.isLoading = false;
                this.pageNo++;
                if (this.freshCourseList.length >= this.total) {
                    this.finished = true;
                }
            });
        },
        selectedType(type) {
            this.isLoading = true;
            this.pageNo = 1;
            this.total = 0;
            this.coursesList = [];
            this.selectType = type;
            //   this.getCoursesList('refresh');
            this.getFreshCourseList('refresh'); // 修改学习状态时刷新
            this.isShow1 = false;
        },
        getStatus(status) {
            this.isLoading = true;
            this.pageNo = 1;
            this.total = 0;
            this.coursesList = [];
            this.selectStatus = status;
            //  this.getCoursesList('refresh');
            this.getFreshCourseList('refresh'); // 修改课程类型时刷新
        },
        detailJump(id, tkhId, type, title) {
            if (type && type === 'AUDIOVIDEO') { //跳转到公开课
                this.$router.push({path: `/publicClass/openDetail/${id}`});
            } else if (type === 'MAP') {
                this.$router.push({path: '/studyMapDetail', query: {itmId: id, title: title}});
            } else {
                this.$router.push({path: `/course/${id}/0`});
            }
        }
    },
    mounted() {
        this.init();
    },
    activated() {
        this.isShow1 = false;
    },
    beforeRouteEnter(to, from, next) {
        next(_this => {
            let selectStatus = _this.$route.query.selectStatus;
            if (from.path.indexOf('/home') !== -1 && selectStatus) {
                _this.isLoading = true;
                _this.selectType = 'All';
                _this.init();
            }
        });
    }
};
</script>

<style scoped lang="less">
</style>
